<template>
  <div class="home">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">
            Echarts编辑器
          </div>
          <div class="layout-nav">
            <Button @click="switchLeftPannel" type="primary">组件</Button>
            <Button @click="isRightOpen = !isRightOpen" type="primary">属性</Button>
          </div>
        </Menu>
      </Header>
      <Layout>
        <div style="width: 100%; height: 100%; position: relative">
          <Drawer title="组件" :closable="false" v-model="isLeftOpen" :mask="false" placement="left" :transfer="false" :inner="true">
            <p>组件1</p>
            <p>组件2</p>
            <p>组件3</p>
          </Drawer>
          <Drawer title="属性" :closable="false" v-model="isRightOpen" :mask="false" placement="right" :transfer="false" :inner="true">
            <p>属性1</p>
            <p>属性2</p>
            <p>属性3</p>
          </Drawer>
        </div>
      </Layout>
    </Layout>
    <mode :left="isModePannelLeft"></mode>
  </div>
</template>

<script>
import mode from '@/components/mode.vue'
export default {
  name: "home",
  components: { mode },
  data() {
    return {
      isCollapsed: false,
      isLeftOpen: false,
      isRightOpen: false,
      isModePannelLeft: 10
    };
  },
  props: {},
  created() {},
  mounted() {},
  computed: {
    rotateIcon() {
      return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
    },
    menuitemClasses() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  },
  methods: {
    switchLeftPannel () {
      this.isLeftOpen = !this.isLeftOpen
      if (this.isLeftOpen) {
        this.isModePannelLeft = 270
      } else {
        this.isModePannelLeft = 10
      }
    },
    collapsedSider() {
      this.$refs.side1.toggleCollapse();
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
/deep/ .ivu-layout {
  width: 100%;
  height: 100%;
}
.layout-logo{
  width: 120px;
  height: 40px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
  color: white;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}
.layout-nav{
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
</style>
